關於 Hook 的方法與實作

useContext

useContext 可以使元件跨越層級直接傳遞變量，與 redux 不同的是，useContext 解決的是元件間傳值問題，redux 則是統一控管狀態

下方程式是以計數器為例，在一開始調用 createContext()方法建立 Context，而透過 <Context.Provider>把需要傳遞的資料帶入 Context 中，在 Counter 中可以藉由useContext(CountContext) 去取得 Provider 帶進來的內容。

import React, { useState, useContext, createContext } from 'react';

const CountContext = createContext();

function Counter() {
  // 
  let count = useContext(CountContext)
  return (<h2>{count}</h2>)
}

function Example() {
  const [ count, setCount ] = useState(0);
  return (
    <div>
      <p>你已經點擊了{count}次</p>
      <button onClick={() => {setCount(count+1)}}>點擊</button>
      <CountContext.Provider value={count}>
        <Counter />
      </CountContext.Provider>
    </div>
  )
}

export default Example

useReducer

Javascript 裡 Reducer 的延伸，在 Redux 裡也有提及，是一個純函數(state, action) => state
可以透過 action 的傳遞，更新邏輯的 State

還記得 Redux 裡提的 Reducer?

下方程式就是 Reducer，由 State 與 Action 組成，經由 Action 的類型去回覆 State 的變化

function calculateReducer(state, action) {
    switch(action.type) {
      case 'ADD':
        return state + 1;
      case 'SUB':
        return state - 1;
      default:
        return state;
    }
}

useReducer 如何使用？

下方程式就是以計數器為例子，眼尖的讀者會發現其實寫法與 Redux 真的差不多

檔案位置 src/Example.js:

import React, { useReducer } from 'react';

function Example() {
  const [ count, dispatch ] = useReducer((state, action) => {
    switch (action){       // 這裡要注意，不是使用 action.type 而是使用 action 
      case 'ADD':
        return state + 1
      case 'SUB':
        return state - 1
      default:
        return state
    }
  }, 1000)   // 預設 count 初始值為 1000
  return (
    <div>
      <h2>現在分數是 {count} </h2>
      <button onClick={()=>dispatch('ADD')}>增加</button>
      <button onClick={()=>dispatch('SUB')}>減少</button>
    </div>
  )
}

export default Example

結論

• 介紹了 Hook 的方法：useContext、useReducer